<template>
  <div id="DataList-dp">
    <el-button
      @click="gotolink"
      size="small"
      type="primary"
      icon="el-icon-upload2"
      >数据上报</el-button
    >
    <span class="widthDiv">
      <el-select
        size="small"
        clearable
        v-model="provinceVul"
        placeholder="请选择分类"
      >
        <el-option
          v-for="item in province"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        ></el-option>
      </el-select>
    </span>
    <el-button
      size="small"
      type="primary"
      icon="el-icon-search"
      @click="toSearch"
      >搜索</el-button
    >
    <el-table
      :header-cell-style="cellClass"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="40"></el-table-column>
      <el-table-column label="省份">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.province }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="城市">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.city }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="地区">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.area }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="新增确诊">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.confirmed }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="疑似">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.suspected }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="死亡">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.dead }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="治愈">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.cure }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="重症">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.severe }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="境外输入">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.outside }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上报时间" width="160px">
        <template slot-scope="scope">
          <el-tag size="medium">{{
            moment(scope.row.inputTime).format("YYYY-MM-DD HH:mm:ss")
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="70">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="100"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :before-close="beforeClose"
    >
      <el-cascader-panel
        :props="{ value: 'label' }"
        v-model="pcaData"
        :options="regionData"
      ></el-cascader-panel>
      <el-form :model="form" :rules="rules" label-width="100px">
        <el-form-item size="small" label="确诊" prop="confirmed">
          <el-input min="0" type="number" v-model="form.confirmed"></el-input>
        </el-form-item>
        <el-form-item size="small" label="疑似" prop="suspected">
          <el-input min="0" type="number" v-model="form.suspected"></el-input>
        </el-form-item>
        <el-form-item size="small" label="死亡" prop="dead">
          <el-input min="0" type="number" v-model="form.dead"></el-input>
        </el-form-item>
        <el-form-item size="small" label="治愈" prop="cure">
          <el-input min="0" type="number" v-model="form.cure"></el-input>
        </el-form-item>
        <el-form-item size="small" label="重症" prop="severe">
          <el-input min="0" type="number" v-model="form.severe"></el-input>
        </el-form-item>
        <el-form-item size="small" label="境外输入" prop="outside">
          <el-input min="0" type="number" v-model="form.outside"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toCancel">取 消</el-button>
        <el-button type="primary" @click="toSave()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../utils/request";
import { regionData } from "element-china-area-data";
let moment = require("moment");
export default {
  data() {
    return {
      title: "录入信息",
      visible: false,
      provinceVul: "",
      province: [
        {
          id: 1,
          name: "辽宁省",
        },
        {
          id: 2,
          name: "天津市",
        },
        {
          id: 3,
          name: "江苏省",
        },
        {
          id: 4,
          name: "上海市",
        },
        {
          id: 5,
          name: "北京市",
        },
      ],
      regionData,
      pcaData: [],
      dialogVisible: false,
      // 当前查看内容的资讯对象
      currentArticle: {},
      // 最新进展数据
      listData: [],
      // 进展数据总数

      tableData: [],
      // 当天疫情数据和历史疫情数据
      form: {},
      // 模态框表单控件标题的宽度
      formLabelWidth: "100px",
      categoryData: [],
      currentPage3: 5,
      pageParam: {
        categoryId: "",
      },
      rules: {
        categoryId: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
        confirmed: [
          {
            required: true,
            message: "请输入正确的确诊数量",
            trigger: "blur",
          },
        ],
        suspected: [
          {
            required: true,
            message: "请输入正确的疑似数量",
            trigger: "blur",
          },
        ],
        dead: [
          {
            required: true,
            message: "请输入正确的死亡数量",
            trigger: "blur",
          },
        ],
        cure: [
          {
            required: true,
            message: "请输入正确的治愈数量",
            trigger: "blur",
          },
        ],
        severe: [
          {
            required: true,
            message: "请输入正确的重症数量",
            trigger: "blur",
          },
        ],
        outside: [
          {
            required: true,
            message: "请输入正确的境外数量",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    toCancel() {
      this.visible = false;
    },
    async toSave() {
      console.log(this.pcaData, "sdfdfg");
      console.log(this.form);
      this.form.province = this.pcaData[0];
      this.form.city = this.pcaData[1];
      this.form.area = this.pcaData[2];
      if (this.pcaData.length == 0) {
        this.$notify({
          title: "提示",
          message: "请选择省市区",
          type: "warning",
        });
        return;
      }
      let res = await axios.post("/epidemic/saveOrUpdate", this.form);
      this.$notify({
        title: res.status == 200 ? "成功" : "失败",
        message: res.statusText,
        type: res.status == 200 ? "success" : "error",
      });
      this.visible = false;
      this.selectData();
    },

    moment,
    handleEdit(row) {
      this.title = "编辑分类信息";
      this.form = { ...row };
      // console.log(row);
      console.log(this.form);
      this.visible = true;
    },
    cellClass({ columnIndex }) {
      // columnIndex是列索引，从0开始
      let color = "#E5F2F2";
      if (columnIndex == 1) color = "#E5F2F2";
      if (columnIndex == 2) color = "#E5F2F2";
      if (columnIndex == 3) color = "#E5F2F2";
      if (columnIndex == 4) color = "#E5F2F2";
      if (columnIndex == 5) color = "#E5F2F2";
      if (columnIndex == 6) color = "#E5F2F2";
      return {
        backgroundColor: color,
        color: "#000",
        height: "60px",
      };
    },
    async pcaChange(val) {
      // 找该省市区当天的数据，如果当天有数据，在表单中填充，做修改操作，如果当天没有数据，表单清空，做新增操作。
      let res = await axios.get("/epidemic/pageQuery", {
        params: {
          page: 1,
          pageSize: 10,
          province: val[0],
          city: val[1],
          area: val[2],
          inputTime: moment(new Date()).format("YYYY-MM-DD"),
        },
      });
      //console.log(res.data.list);
      if (res.data.list.length == 0) {
        // 要新增
        this.form = {
          country: "中国",
          province: val[0],
          city: val[1],
          area: val[2],
          confirmed: "",
          suspected: "",
          dead: "",
          cure: "",
          severe: "",
          outside: "",
        };
      } else {
        // 要修改
        this.form = {
          ...res.data.list[0],
        };
      }
    },
    gotolink() {
      //点击跳转至上次浏览页面
      //  this.$router.go(-1)

      //指定跳转地址
      this.$router.replace("/Up");
    },
    // 查找分类
    async findAllCategory() {
      let res = await axios.get("/epidemic/pageQuery");
      this.categoryData = res.data;
    },
    // 模态框关闭之前
    beforeClose(done) {
      done();
    },
    toSearch() {
      axios
        .get("/epidemic/pageQuery", {
          params: { page: 1, pageSize: 20, province: this.provinceVul },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.list;
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    async selectData() {
      let res = await axios.get("/epidemic/pageQuery", {
        params: { page: 1, pageSize: 20 },
      });
      this.tableData = res.data.list;
      this.categoryData = res.data.province;
      console.log(res.data.province);
    },
  },
  created() {
    this.selectData();
    this.findAllCategory();
  },

  mounted() {},
};
</script>
<style scoped>
.widthDiv {
  display: inline-block;
}
</style>